<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .light{
            /*日间模式*/
            color: black;
            background-color: white;
            height: 400px;
        }
        .dark{
            /*夜间模式*/
            color: white;
            background-color: black;
            height: 400px;
        }

    </style>
</head>
<body>
    <div class="box" onclick="alert('hi~')">abc</div>
    <div id="id">def</div>
    <h3>
        <span>
            <input type="text">
        </span>
    </h3>

    <div class="box2" >one</div>

    <div class="box3" >修改元素内容div</div>

    <img src="hhh.jpg" alt="修改元素属性" height="200px"/>

    <br>
    <input type="text" id="in1">
    <button id="b1">点我~</button>

    <br>
    <input type="text" id="in2">
    <button id="b2">隐藏密码~</button>

    <div style="font-size: 20px" class="three">修改样式属性div</div>


    <div id = "div1"class="light" >修改样式属性:修改元素应用的CSS类名</div>

    <div class="five">针对当前页面上没有的元素进行展开-新增元素</div>

    <ul class="four">
        <li>11</li>
        <li>22</li>
    </ul>

<script>
    //  document :浏览器中的全局对象
    // 任何一个页面,都会有一个 document对象
    let elem1 = document.querySelector('.box');  //如果有多个,只会返回第一个
    let elem4 = document.querySelectorAll('.box'); //获取全部的 ,返回数组
    console.log(elem1);
    console.dir(elem1); //当做对象, 返回了

    let elem2 = document.querySelector('#id');
    console.log(elem2);

    let elem3 = document.querySelector('h3>span>input');
    console.log(elem3);

    let div = document.querySelector('.box2');
    div.onclick = function () {
        alert('hi~');
    }

    let div2 = document.querySelector('.box3');
    div2.onclick = function () {
        console.log(div2.innerHTML);
        div2.innerHTML += '荣';
    }

    let img = document.querySelector('img');
    
    img.onclick = function (){
        console.log(img.src);

        img.src = '1.png';
    }

    let  input1 = document.querySelector('#in1');
    let   button1 = document.querySelector('#b1');
    button1.onclick = function() {
        console.log(input1.value);
        let value = parseInt(input1.value);
        value += 1;
        input1.value = value;

    }


    let  input2 = document.querySelector('#in2');
    let   button2 = document.querySelector('#b2');
    button2.onclick = function() {
        if(input2.type == 'text'){
            input2.type = 'password';
            button2.innerHTML = '显示密码';
        }else{
            input2.type = 'text';
            button2.innerHTML = '隐藏密码';
        }

    }

    let div3 = document.querySelector('.three');
    div3.onclick = function () {

        console.log(div3.style.fontSize);
        let num =  parseInt(div3.style.fontSize);
        num +=10;
        div3.style.fontSize = num+'px';

    }
    
    let div4 = document.querySelector('#div1');

    div4.onclick = function () {
        //点击 div 切换日间模式和夜间模式
        if (div4.className == 'dark'){
            div4.className = 'light';
        }else {
            div4.className = 'dark';
        }
    }


    let input3 = document.createElement('input');
    //让输入框默认显示 hello 这个内容
    input3.value = 'hello';

    let div5 = document.querySelector('.five');
    div5.appendChild(input3);

    let ul1 = document.querySelector('.four');
    for (let n = 3; n<10;n++){
        let li = document.createElement('li');
        li.innerHTML = n+''+n;
        ul1.append(li);
    }

    //删除33元素
    let toDelete = document.querySelectorAll('li')[2];
    console.log(toDelete);
    ul1.removeChild(toDelete);

</script>
</body>
</html>